<template>
    <div class="container">
        <div class="header">

            <el-select v-model="value" @change="letterChange" placeholder="请选择">
                <el-option
                v-for="item in letters"
                :key="item.value"
                :label="item.label"
                active-color="#999"
                inactive-color="666"
                :value="item.value">
                </el-option>
            </el-select>
            <el-switch
                v-model="showMeans"
                active-color="#4257B2"
                active-text="显示意思" class="switch">
                </el-switch>
            <el-menu default-active=0 active-text-color="#3CCFCF" class="menu" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">熟悉</el-menu-item>
                <el-menu-item index="0">未处理的</el-menu-item>
                <el-menu-item index="2">陌生</el-menu-item>
            </el-menu>
            <el-input class="use-key" @input="inputChange" v-model="useKey" placeholder="请输入useKey"></el-input>
        </div>
        <div class="body">
            <el-carousel class="carousel" :initial-index=1 :loop="false" :autoplay="false" indicator-position="none" arrow="never" ref="mainBody">
                <el-carousel-item>
                   <el-row :gutter="12">
                        <div  v-for="(item,index) in list1" :key="index" style="inline">
                            <transition name="fade">
                                <el-col :span="4" v-if="shows[index]">
                                    <el-card shadow="hover" @click.native="hideCard($event,index)">
                                        <div class="iword" :style="showMeans ? '' : 'font-size:44px;margin-top:10px'">{{item.word}}</div>
                                        <div class="isound">{{item.sound}}</div>
                                        <div v-if="showMeans" class="imeans">{{item.means}}</div>
                                        <div class="card-left" @click="alterStatus(item.id,0)"><i class="el-icon-close"/></div>
                                        <div class="card-right" @click="alterStatus(item.id,2)"><i class="el-icon-circle-plus-outline"/></div>
                                    </el-card>

                                </el-col>
                            </transition>
                        </div>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                   <el-row :gutter="12">
                        <div  v-for="(item,index) in list0" :key="index" style="inline">
                            <transition name="fade">
                                <el-col :span="4" v-if="shows[index]">
                                    <el-card shadow="hover" @click.native="hideCard($event,index)">
                                        <div class="iword" :style="showMeans ? '' : 'font-size:44px;margin-top:10px'">{{item.word}}</div>
                                        <div class="isound">{{item.sound}}</div>
                                        <div v-if="showMeans" class="imeans">{{item.means}}</div>
                                        <div class="card-left" @click="alterStatus(item.id,1)"><i class="el-icon-circle-check"/></div>
                                        <div class="card-right" @click="alterStatus(item.id,2)"><i class="el-icon-circle-plus-outline"/></div>
                                    </el-card>

                                </el-col>
                            </transition>
                        </div>
                    </el-row>
                </el-carousel-item>
                <el-carousel-item>
                   <el-row :gutter="12">
                        <div  v-for="(item,index) in list2" :key="index" style="inline">
                            <transition name="fade">
                                <el-col :span="4" v-if="shows[index]">
                                    <el-card shadow="hover" @click.native="hideCard($event,index)">
                                        <div class="iword" :style="showMeans ? '' : 'font-size:44px;margin-top:10px'">{{item.word}}</div>
                                        <div class="isound">{{item.sound}}</div>
                                        <div v-if="showMeans" class="imeans">{{item.means}}</div>
                                        <div class="card-left" @click="alterStatus(item.id,1)"><i class="el-icon-circle-check"/></div>
                                        <div class="card-right" @click="alterStatus(item.id,0)"><i class="el-icon-close"/></div>
                                    </el-card>

                                </el-col>
                            </transition>
                        </div>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
const axios = require('axios')
export default {
  name: 'Word',
  data () {
    return {
      host: 'localhost:8080/',
      letters: [],
      value: 'A',
      show: true,
      shows: [],
      list0: [],
      list1: [],
      list2: [],
      current0: 1,
      current1: 1,
      current2: 1,
      pageSize: 1000,
      showMeans: true,
      itemIndex: 0,
      useKey: ''
    }
  },
  created () {
    document.addEventListener('keydown', this.handleEvent)
    this.useKey = localStorage.getItem('use_key')
    this.initShow()
    this.initLetters()
    this.initPage(0)
  },
  methods: {
    handleEvent (event) {
      // alert(event.keyCode)
      if (event.keyCode === 32) {
        this.showMeans = !this.showMeans
      }
      // if (event.keyCode === 37) {
      //     if(this.itemIndex == 0)
      //         return
      //     this.$refs.mainBody.setActiveItem(--this.itemIndex)
      //     this.initPage(this.itemIndex)
      // }
      // if (event.keyCode === 39) {
      //     if(this.itemIndex == 2)
      //         return
      //     this.$refs.mainBody.setActiveItem(++this.itemIndex)
      //     this.initPage(this.itemIndex)
      // }
    },

    initPage (index) {
      var that = this
      axios.get('/api/listAll', {params: {useKey: this.useKey, 'status': index, size: this.pageSize, firstLetter: this.value}}).then(function (res) {
        that['list' + index] = res.data.records
        that.refreshShow()
      })
    },
    initShow () {
      var s = true
      this.shows = []
      for (var i = 0; i < 1000; i++) {
        this.shows.push(s)
      }
      // console.log(this.shows);
    },
    refreshShow () {
      for (var i = 0; i < 1000; i++) {
        this.$set(this.shows, i, true)
      }
    },
    initLetters () {
      this.letters = []
      for (var i = 0; i < 26; i++) {
        var l = String.fromCharCode(65 + i)
        this.letters.push({'value': l, 'label': l})
      }
      // this.letters.value="a"
      // console.log(this.letters)
    },
    handleSelect (key, keyPath) {
      this.itemIndex = key
      this.show = !this.show
      var index = 0
      if (key == 0) {
        index = 1
      } else if (key == 1) {
        index = 0
      } else {
        index = 2
      }
      this.$refs.mainBody.setActiveItem(index)
      this.initPage(key)
    },
    hideCard (e, index) {
      this.$set(this.shows, index, false)
    },
    alterStatus (id, stauts) {
      axios.post('/api/alterWordStatus/' + id + '/' + stauts).then(function (res) {
        console.log('修改成功')
      })
    },
    letterChange () {
      this.initPage(this.itemIndex)
    },
    inputChange () {
      localStorage.setItem('use_key', this.useKey)
      this.initPage(this.itemIndex)
    }

  }
}
</script>

<style>
.container {
    height: 100%;
    width: 100%;
}
.header {
    height: 70px;
}
.body {
    height: calc(100vh - 70px);
    padding: 0 22px;
}
.carousel {
    height: 100%;
}
.el-carousel__container {
    height: 100%;
}
.el-input__inner {
    background: none;
    border: none;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0;
}
.el-select {
    width: 70px;
    margin-left: 20px;
    float: left;
    margin-top: 5px;
}
.el-carousel-item {
    padding: 0 22px;
}
.menu {
    background: none !important;
    display: inline-block;
    border: none;
}
.el-menu-item {
    border:none !important;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background: none;
    border:none;
}
.el-menu-item.is-active {
    border: none;
}
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 0;
}
.use-key {
    float: right;
    margin-right: 20px;;
    width: 150px;
    margin-top: 10px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transition: all .5s ease;
    width: 0px;
}
.fade-leave-to .el-card {
    opacity: 0;
    transition: all .5s ease;
    background: pink;
}
.el-card {
    margin-bottom: 12px;
    height: 120px;
    margin-right: 5px;
    position: relative;
    cursor: pointer;
}
.el-carousel__item::-webkit-scrollbar {/*滚动条整体样式*/
    width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
}

.el-carousel__item::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #6495ED;
}

.el-carousel__item::-webkit-scrollbar-track {/*滚动条里面轨道*/
    /* box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
    border-radius: 3px;
    background: #F6F7FB;
}
.el-carousel__item {
    overflow-y: scroll;
}
.iword {
    font-size: 32px;
}
.el-col {
    padding: 0 !important;
}
.isound {
    font-size: 12px;
}
.imeans {
    margin-top: 5px;
    font-size: 14px;
}
.switch {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}
/* .switch .el-switch__core {
    width: 28px !important;
    height: 14px !important;
}
.switch .el-switch.is-checked .el-switch__core::after{
    margin-left: -12px !important;
}
.switch .el-switch__core:after {
    top: -1;
    width: 14px;
    height: 14px;
    left: -1;
} */
.switch .el-switch__label * {
    color: #999;
    font-size: 8px !important;
}
.el-card .card-right,.el-card .card-left {
    opacity: 0;
    height: 0;
}
.el-card .card-right i,.el-card .card-left i{
    display: none;
}
.el-card:hover .card-right i,.el-card:hover .card-left i{
    display: inline-block;
}
.el-card:hover .card-left {
    opacity: 1;
    transition: all .3s ease;
    display: inline-block;
    width: 100px;
    background: #3CCFCF;
    height: 60px;
    left: 0;
    position: absolute;
    bottom: 0;
    transition-duration: .3s;
    box-shadow: 1px -1px 9px -2px #999;
}
.el-card:hover .card-right {
    opacity: 1;
    display: inline-block;
    width: 100px;
    background: #FF9C8C;
    height: 60px;
    right: 0;
    position: absolute;
    bottom: 0;
    transition-duration: .3s;
    box-shadow: 1px -1px 9px -2px #999;
}
.el-card:hover .card-left i,.el-card:hover .card-right i {
    font-size: 30px;
    line-height: 60px;
}

.test {
    width: 100px;
    height: 100px;
    background: red;
    transition-duration: 1s;
}
.test:hover {
    width: 200px;
}
</style>
